<template>
  <a-card>
    <div v-if="mod=='normal'" class="account">
      <a-space class="operator">
        <a-button @click="addProduct" type="primary" v-auth="`add`">新建</a-button>
        <a-button @click="open_delete_piliang" type="danger" v-auth="`delete`">批量删除</a-button>
        <a-select v-model="youhuashiId" style="width:120px;" @change="selectYouhuashi">
          <a-select-option :value="0">全部</a-select-option>
          <a-select-option :value="item.id" v-for="(item,index) in youhuashi" :key="index" >
            {{item.username}}
          </a-select-option>
        </a-select>
      </a-space>
      <standard-table
        rowKey="id"
        :loading='loading'
        :columns="columns"  
        :dataSource="dataSource"
        :expandedRowKeys.sync='expandedRowKeys'
        @clear="onClear" 
        @change="onChange"
        :pagination="{total:total,showTotal:total => `共 ${total} 条数据`, pageSize: pageSize,showLessItems: true, showSizeChanger:true}"
        @onExpand="onExpand" 
        :scroll="{x:600}"
      >
        <div slot="type" slot-scope="{record}" v-if="record.pid != 0">
          {{ record.type | setType }}
        </div>
        <div slot="username" slot-scope="{record}">
          {{ record.username || '无' }}
        </div>
        <div slot="action" slot-scope="{record}" >
          <a style="margin-right: 8px" @click="edit(record.id, record.admin_userid, record.product_name)" href="javascript:;" v-auth="`edit`">
            <a-icon type="edit"/>编辑
          </a>
          <a-popconfirm title="确定删除？" ok-text="删除" cancel-text="取消" @confirm='deleteRecord(record.id)' v-auth="`delete`">
            <a href="javascript:;">
              <a-icon type="delete" />删除
            </a>
          </a-popconfirm>
        </div>
      </standard-table>
    </div>
    <a-modal
      title=""
      :closable="false"
      :visible="delete_show"
      okText="提交"
      @ok="delete_piliang"
      @cancel="delete_show = false"
    >
      <a-select
        mode="multiple"
        style="width: 100%"
        placeholder="选择需要删除的商品"
        :filter-option="delete_filterOption"
        :maxTagCount="20"
        v-model="delete_arr"
      >
        <a-select-option v-for="i in total_dataSource" :key="i.id">
          {{ i.product_name }}
        </a-select-option>
      </a-select>
    </a-modal>
    <div v-if="mod=='add'">
      <Add :mod.sync="mod" />
    </div>
    <div v-if="mod=='edit'">
      <Edit :mod.sync="mod" :id="editId" :product_name="product_name" :admin_userid="admin_userid"/>
    </div>
  </a-card>
</template>

<script>
import {getOptimizerList} from '@/api/xinxiliu/account'
import {getProductList,delProduct} from '@/api/dianshang/dianshang'
import StandardTable from '@/components/table/StandardTable'
import Add from './add/add.vue'
import Edit from './edit/edit.vue'

export default{
  data() {
    return {
      mod:'normal',
      youhuashi:[], // 优化师列表
      youhuashiId: 0,
      dataSource:[],
      page:1,
      pageSize:10,
      loading:false,
      admin_userid:0,
      total:0,
      expandedRowKeys:[],
      product_name:'',
      editId: '',
      delete_show: false,
      delete_arr: [],
      total_dataSource: [],
      columns:[
        {
          title: 'ID',
          dataIndex: 'id',
          width: 100,
        },
        {
          title: '产品名',
          dataIndex: 'product_name',
          width: 250,
        },
        {
          title: '优化师',
          dataIndex: 'username',
          scopedSlots: { customRender: 'username' },
          width: 100,
        },
        {
          title: '创建时间',
          dataIndex: 'create_time',
          width: 250,
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: 260,
          scopedSlots: { customRender: 'action' },
        }
      ]
    }
  },
  created(){
    this.init()
  },
  methods:{
    init(){
      this.getProductList()
      this.getOptimizerList()
    },
    getProductList(){
      let params = {
        page: this.page,
        pagesize: this.pageSize,
        admin_userid: this.youhuashiId
      }
      this.loading = true
      getProductList(params).then((res) => {
        this.loading = false
        // console.log(res)
        if(res.errcode == 0){
          this.total = res.data.total
          this.dataSource = res.data.productList
        }
      }).catch(() => {
        this.loading = false
      });
    },
    deleteRecord(id) {
      const hide = this.$message.loading('删除中')
      delProduct({ id }).then((res) => {
        hide()
        if(res.errcode == 0){
          this.$message.success('删除成功')
          this.getProductList()
        }
      }).catch(() => {
        hide()
      });
    },
    open_delete_piliang() {
      let params = {
        page: 1,
        pagesize: 99999,
        admin_userid: this.youhuashiId
      }
      getProductList(params).then((res) => {
        this.delete_show = true
        if(res.errcode == 0){
          this.total_dataSource = res.data.productList
        }
      }).catch(() => {
      });
    },
    delete_piliang() {
      let ids = this.delete_arr.join(',')
      this.deleteRecord(ids)
      this.delete_show = false
    },
    addProduct(){
      this.mod = 'add'
    },
    getOptimizerList(){
      // 获取优化师列表
      getOptimizerList({}).then((res) => {
        if(res.errcode == 0){
          this.youhuashi = res.data
        }
      });
    },
    selectYouhuashi(e){
      this.youhuashiId = e
      this.getProductList()
    },
    edit(editId, userid, product_name){
      this.editId = editId
      this.admin_userid = userid
      this.product_name = product_name
      this.mod = 'edit'
    },
    onExpand(bool, row){
      console.log(bool, row)
    },
    onClear() {
      this.$message.info('您清空了勾选的所有行')
    },
    onChange(e) {
      // console.log(e)
      this.page = e.current
      this.pageSize = e.pageSize
      this.getProductList()
    },
    delete_filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  },
  watch:{
    mod(e){
      if(e=='normal'){
        this.getProductList()
      }
    },
  },
  components:{
    StandardTable,
    Add,
    Edit,
  },
}
</script>

<style lang="less" scoped>
.operator{
  margin-bottom: 18px;
}
</style>